<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>添加舱位等级addFlightCabin.html</title>
	</head>
	<link rel="stylesheet" href="../css/common.css" />
	<style>
		#box{
			width:320px;
			height:520px;
			overflow:auto;
			margin:0 auto;
			text-align:right;
			margin-top:30px;
			position:relative;
		}
		.blue{
			color:#00aa98;
			font-size:16px;
		}
		.title{
			margin-top:10px;
		}
	    input{
	    	width:225px;
	    	height:23px;
	    	padding-left:10px;
	    	border:1px solid #a9a9a9;
	    }
	    table{
	    	width:100%;
	    	text-align:center;
	    	margin-top:30px;
	    }
	    table th{
	    	width:50%;
	    	background:#eeeeee;
	    	height:30px;
	    	font-weight:normal;
	    }
	    table td{
	    	height:35px;
	    }
	    table th,td{
	    	border:1px solid #e4e4e4;
	    }
	    table td input{
	    	width:100%;
	    	height:100%;
	    	border:none;
	    	outline:none;
	    	padding:0;
	    	text-align:center;
	    }
	    .btn{
	    	width:320px;
	    	height:50px;
	    	position:fixed;
	    	bottom:0;
	    	text-align:center;
	    }
	    .btn button{
	    	width:116px;
			height:28px;
			color:white;
			background:#00aa98;
			border:none;
			border-radius:1px;
			outline:none;
			cursor:pointer;
	    	margin:0 8px;
	    }
	    .btn .cancel{
	    	background:#a1a4a9;
	    }
	</style>
	<body ng-app="myApp" ng-controller="ctrl1">	
		<div id="box">
			<div class="title">
				<label>航司中文名</label>
				<input type="text"/>
			</div>
			<div class="title">
				<label>二字码</label>
				<input uppercase type="text"/>
			</div>
			<div class="title">
				<label>航位序列</label>
				<input uppercase type="text" ng-model="cabinListVal"/>
			</div>			
			<table>
				<tr>
					<th>折扣</th>
					<th>舱位</th>
				</tr>
				<tbody class="clear">
					<tr ng-repeat="cabin in cabinList track by $index"">
						<td><input type="text" ng-model="cabin.value"></td>
						<td ng-class="{blue:cabin.isBlue}" ng-bind="cabin.cabin"></td>
					</tr>
				</tbody>
			</table>		
			<div class="btn">
				<button class="sure" ng-click="sure()">确认</button>
				<button class="cancel" ng-click="cancel()">取消</button>
			</div>
		</div>
	</body>
		<script type="text/javascript" src="../js/jquery-1.12.4.js" ></script>		
		<script type="text/javascript" src="../layer-v2.4/layer/layer.js" ></script>
		<script type="text/javascript" src="../js/angular.min.js" ></script>
		<script type="text/javascript" src="../js/common.js" ></script>
		<script>
			angular.module("myApp",[])
			.controller("ctrl1",function($scope,$http){
				$scope.$watch('cabinListVal', function (newVal, oldVal){
					if(newVal){
						var newVal = newVal.toUpperCase();
						$scope.cabinList = [];
						for(var i=0;i<newVal.length;i++){
							var json = {};							
							if(newVal[i]!="/"){
								if(i==0){									
									json = {
										'cabin':newVal[i],
										'isBlue':true,
										'value':""
									}									
								}else{
									json = {
										'cabin':newVal[i],
										'isBlue':false,
										'value':""
									}
								}								
								$scope.cabinList.push(json);
							}else{
								if(newVal[0]=="/"){
									$scope.cabinListVal = oldVal;
									layer.msg("输入有误'/'", {icon:2});
									return false;
								}else if(newVal[i+1]!="/"&&newVal[i+1]){									
									json = {
										'cabin':newVal[i+1],
										'isBlue':true,
										'value':""
									}
									i++
									$scope.cabinList.push(json);
								}else if(newVal[i+1]=="/"){
									$scope.cabinListVal = oldVal;
									layer.msg("请勿重复输入'/'", {icon:2});
								}								
							}
							
						}
					}
				})																								
				//确定
				$scope.sure = function(){
					console.log($scope.cabinList)
				}
				//取消
				$scope.cancel = function(){
					closeWin();
				}
				
			})
		
		
		
		
		
		</script>		
</html>
